<script setup>
import { ref, reactive } from 'vue'
import { addOrUpdateUser } from '@/assets/api/system'
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    activeData: {
        type: Object,
        default() {
            return null
        },
    },
})
const emits = defineEmits(['update:visible', 'success'])
function closeAction() {
    emits('update:visible', false)
}
const newFormRef = ref()
const newForm = reactive({
    id: '',
    userName: '',
    password: '',
    state: 1,
    remark: '',
})
function initForm() {
    if (props.activeData) {
        const { id, userName, password, state, remark } = props.activeData
        newForm.id = id
        newForm.userName = userName
        newForm.password = password
        newForm.state = state
        newForm.remark = remark
    }
}
initForm()

const formRules = reactive({
    userName: [
        {
            required: true,
            message: '请输入用户名',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
        },
    ],
    state: [
        {
            required: true,
            message: '请选择状态',
        },
    ],
})
function submitAction() {
    newFormRef.value.validate((valid, fields) => {
        if (valid) {
            addOrUpdateUser(newForm).then(() => {
                closeAction()
                emits('success')
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<template>
    <el-dialog
        :model-value="visible"
        :title="newForm.id ? '编辑用户' : '新增用户'"
        width="400px"
        :draggable="true"
        @close="closeAction"
    >
        <el-form
            ref="newFormRef"
            :model="newForm"
            label-width="80px"
            :rules="formRules"
        >
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="newForm.userName" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="newForm.password" type="password" />
            </el-form-item>
            <!-- <el-form-item label="角色" prop="role">
                <el-select
                    v-model="newForm.role"
                    placeholder="请选择"
                    class="full"
                >
                    <el-option label="管理员" value="1" />
                    <el-option label="普通员工" value="2" />
                </el-select>
            </el-form-item> -->
            <el-form-item label="状态" prop="state">
                <el-select
                    v-model="newForm.state"
                    placeholder="请选择"
                    class="full"
                >
                    <el-option label="正常" :value="1" />
                    <el-option label="禁用" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="newForm.remark" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAction">取消</el-button>
                <el-button type="primary" @click="submitAction">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped></style>
